<template>
  <b-page class="hdgl-list " :load="ready===2">
    <div class="hdgl-table">
      <div class="button-container">
        <a-button
          class="queryParam-item"
          type="primary"
          @click="addModel">新建活动
        </a-button>
      </div>

      <div class="mt-10 queryParam-container">
        活动状态:
        <a-select
          :value="queryParam.k2"
          placeholder="活动状态"
          class="queryParam-item"
          allowClear
          style="width: 100px;"
          @change="statusChange">
          <a-select-option
            v-for="item in gameState"
            :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <span class="ml-10">公众号：</span>
        <a-select
          :value="queryParam.k3"
          placeholder="公众号"
          class="queryParam-item"
          allowClear
          style="width: 230px;"
          @change="mpChange">
          <a-select-option
            v-for="item in mpList"
            :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <span class="ml-10">活动名称：</span>
        <a-input
          v-model="queryParam.keyword"
          allowClear
          placeholder="活动名称"
          style="width: 230px;"
          :maxLength="20"
          class="queryParam-item"/>
        <a-button
          class="ml-10 queryParam-item"
          icon="search"
          type="primary"
          :loading="loading"
          style="margin-right: 5px;"
          @click="getPage">
          检索
        </a-button>
      </div>

      <div class="hdgl-list-content-warp content-container">
        <div class="hdgl-list-content" v-if="hdglList.length>0">
          <div v-for="item in hdglList" :key="item.id" class="hdgl-list-item">
            <img class="hdgl-list-bg" :src="item.posterFileUrl">
            <div class="hdgl-item-bottom">
              <div class="hdgl-item-id d-jcc-aic">ID
                <div style="margin-left: 5px">{{ item.id }}</div>
              </div>
              <div class="game-content">
                <div class="game-name">{{ item.name?item.name.substring(0,10):'默认名字' }}<span
                  v-if="item.name&&item.name.length>10">...</span></div>
                <div class="game-state-time">
                  <div>
                    创建于{{ item.createTime?getTime(item.createTime):'2019-12-24 11:11' }}
                  </div>
                  <div style="color: #ff5f5f">
                    {{ getState(item) }}
                  </div>
                </div>
              </div>
              <div class="game-buttons">
                <div class="game-left-button">
                  <a-tooltip class="game-button" title="数据统计" placement="top">
                    <a-button
                      class="game-button"
                      shape="circle"
                      icon="line-chart"
                      @click="gotoSjgl(item)"/>
                  </a-tooltip>
                  <a-tooltip class="game-button" title="参与粉丝" placement="top">
                    <a-button
                      class="game-button"
                      shape="circle"
                      icon="team"
                      @click="gotoCyfs(item)"/>
                  </a-tooltip>
                  <a-tooltip title="编辑" placement="top">
                    <a-button
                      class="game-button"
                      shape="circle"
                      icon="form"
                      @click="editModel(item)"/>
                  </a-tooltip>
                  <a-tooltip title="渠道" placement="top">
                    <a-button
                      class="game-button"
                      shape="circle"
                      icon="share-alt"
                      @click="showChannel(item)"/>
                  </a-tooltip>
                </div>
                <div class="game-right-button">
                  <a-popover
                    trigger="hover"
                    overlayClassName="hdgl-list-popover"
                    placement="top">
                    <template slot="content">
                      <div class="right-buttons">
                        <div
                          v-if="item.pause"
                          class="right-button-content"
                          @click="start(item,0,'start')">
                          <div class="game-popover-button d-jcc-aic">
                            <div
                              class="game-popover-button-content"
                              :class="{ 'active': clickIcon==='start' }">
                              <a-icon type="caret-right"/>
                            </div>
                          </div>
                          <span class="right-button-name">启用活动</span>
                        </div>
                        <div
                          v-else
                          class="right-button-content"
                          @click="changeStatus(item,1,'pause')">
                          <div class="game-popover-button d-jcc-aic">
                            <div
                              class="game-popover-button-content"
                              :class="{ 'active': clickIcon==='pause' }">
                              <a-icon type="pause"/>
                            </div>
                          </div>
                          <span class="right-button-name">暂停活动</span>
                        </div>
                        <div class="right-button-content" @click="copyGame(item,'copy')">
                          <div class="game-popover-button d-jcc-aic">
                            <div
                              class="game-popover-button-content"
                              :class="{ 'active': clickIcon==='copy' }">
                              <a-icon type="copy"/>
                            </div>
                          </div>
                          <span class="right-button-name">复制活动</span>
                        </div>
                        <div class="right-button-content d-aic" @click="remove(item,'delete')">
                          <div class="game-popover-button d-jcc-aic">
                            <div
                              class="game-popover-button-content"
                              :class="{ 'active': clickIcon==='delete' }">
                              <a-icon type="delete"/>
                            </div>
                          </div>
                          <span class="right-button-name">删除</span>
                        </div>
                      </div>
                    </template>
                    <a-button class="game-button" shape="circle" icon="more" circle/>
                  </a-popover>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="hdgl-list-empty">
          <a-empty v-if="ready===2"/>
        </div>
      </div>
    </div>
  </b-page>
</template>

<script>
    import API from '@/api/mp/gameTask'
    import MP_API from '@/api/common'
    import defaultPicture from '@/perm/assets/default.png'
    import moment from 'moment'

    export default {
        name: 'HdglList',
        data () {
            return {
                queryParam: { k5: null, k2: null, k3: null, keyword: null },
                gameState: [
                    { label: '全部', value: 'ALL' },
                    { label: '进行中', value: 'ING' },
                    { label: '暂停', value: 'PAUSE' },
                    { label: '已结束', value: 'OVER' }],
                mpList: [],
                mpDefault: 0,
                // 分页参数
                total: 0,
                size: 100,
                current: 0,

                hdglList: [],
                modifyId: 0,
                ready: 0,
                editing: false,
                defaultPicture,
                clickIcon: null,
                loading: false
            }
        },
        computed: {
            gzhUserId () {
                return this.$store.state.user.info.gzhUserId
            }
        },
        mounted () {
            this.ready = 0
            this.prepare()
            this.getPage()
        },
        methods: {
            statusChange (value) {
                this.queryParam.k2 = value
            },
            mpChange (value) {
                this.queryParam.k3 = value
            },
            /**
             * 准备必要数据
             */
            prepare () {
                this.mpList = [{ label: '全部', value: 0 }]
                // 初始化自己的公众号账户
                MP_API.listMyMps().then(res => {
                    res.forEach(item => {
                        this.mpList.push({ label: item.mpName, value: item.mpAppId })
                    })
                    this.mpDefault = this.mpList[0].value
                    this.ready += 1
                }).catch(() => {
                    this.ready += 1
                    // this.$notification['error']({
                    //   message: '错误',
                    //   description: ((err.response || {}).data || {}).message || '初始化公众号账户出现错误，请稍后再试',
                    //   duration: 4
                    // })
                })
            },
            getTime (time) {
                return this.$Utils.getTimeFormat(time)
            },
            /**
             * 初始化页面
             */
            getPage () {
                this.queryParam.k5 = this.gzhUserId
                API.pageMyGame(
                    {
                        current: this.current,
                        size: this.size
                    }, this.queryParam)
                    .then(res => {
                        this.ready += 1
                        this.hdglList = res.records
                        this.total = res.total
                        this.current = res.current
                        this.size = res.size
                        // 延迟载入图片
                    }).catch(() => {
                    this.ready += 1
                })
            },
            /**
             * 替换活动状态TODO
             * @returns {string}
             */
            getState (item) {
                const endTimeStamp = moment(item.endTime).unix() * 1000
                const nowTimestamp = new Date().getTime()
                if (endTimeStamp < nowTimestamp) {
                    return '已结束'
                } else if (item.pause) {
                    return '暂停'
                } else {
                    return '进行中'
                }
            },
            clickStyle (clickIcon) {
                this.clickIcon = clickIcon
                setTimeout(() => {
                    this.clickIcon = null
                }, 2000)
            },
            start (row, status, clickIcon) {
                this.clickStyle(clickIcon)
                const self = this
                // if (row.status === 'OVER') {
                //   this.$message.error('已结束活动，不可改版活动状态')
                //   return
                // }
                this.$warning({
                    title: '是否开启' + row.name + '活动',
                    okText: '确认',
                    okType: 'primary',
                    maskClosable: true,
                    onOk () {
                        API.OpenOrClose(row.id, self.gzhUserId, status).then(res => {
                            self.$message.success(`操作成功`)
                            self.getPage()
                        })
                    }
                })
            },
            changeStatus (row, pause, clickIcon) {
                // const nowTimestamp = new Date().getTime()
                this.clickStyle(clickIcon)
                const self = this
                // if (row.endTime < nowTimestamp) {
                //   this.$message.error('已结束活动，不可改版活动状态')
                //   return
                // }
                this.$warning({
                    title: '是否暂停' + row.name + '活动',
                    okText: '确认',
                    okType: 'primary',
                    maskClosable: true,
                    onOk () {
                        API.OpenOrClose(row.id, self.gzhUserId, pause).then(res => {
                            self.$message.success(`操作成功`)
                            self.getPage()
                        })
                    }
                })
            },
            copyGame (row, clickIcon) {
                this.clickStyle(clickIcon)
                const self = this
                this.$warning({
                    title: '是否复制' + row.name + '活动',
                    okText: '确认',
                    okType: 'primary',
                    maskClosable: true,
                    onOk () {
                        API.copyGame(row.id, self.gzhUserId).then(res => {
                            self.$message.success(`操作成功`)
                            self.getPage()
                        })
                    }
                })
            },
            remove (row, clickIcon) {
                this.clickStyle(clickIcon)
                const self = this
                this.$warning({
                    title: `此操作将永久删除活动【${row.name}】, 是否继续?`,
                    okText: '确认',
                    okType: 'primary',
                    maskClosable: true,
                    onOk () {
                        API.deleteGame(row.id, self.gzhUserId).then(res => {
                            self.$message.success(`操作成功`)
                            self.getPage()
                        })
                    }
                })
            },
            addModel () {
                this.$router.push({
                    path: '/lbsq/rwb/edit'
                })
            },
            editModel (game) {
                this.$router.push({
                    path: '/lbsq/rwb/edit',
                    query: {
                        gameId: game.id
                    }
                })
            },
            showChannel (item) {
                this.$router.push({
                    path: '/lbsq/rwb/qdgl',
                    query: {
                        gameTaskId: item.id
                    }
                })
            },
            gotoSjgl (item) {
                this.$router.push({
                    path: '/lbsq/rwb/sjtj',
                    query: {
                        gameTaskId: item.id
                    }
                })
            },
            gotoCyfs (item) {
                this.$router.push({
                    path: '/lbsq/rwb/cyfs',
                    query: {
                        gameTaskId: item.id,
                        gameName: item.name
                    }
                })
            },
            savedModel () {
                this.editing = false
                this.getPage()
            }
        }
    }
</script>

<style lang="less">
    .hdgl-list {
        min-width: 1000px;
        height: 100%;

        .queryParam-container {
            margin-top: 20px
        }

        .hdgl-table {
            padding: 0 16px;
        }

        .hdgl-list-content-warp {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .hdgl-list-empty {
            width: 100%;
            min-height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #909399;
        }

        .hdgl-list-content {
            /*调整内容对齐空白*/
            display: flex;
            width: 100%;
            flex-wrap: wrap;

            .hdgl-list-item:hover {
                box-shadow: 0 4px 12px 0 rgba(51, 51, 51, .2);
            }

            .hdgl-list-item {
                position: relative;
                margin: 15px 15px 15px 0;
                width: 266px;
                height: 342px;
                box-shadow: 0 2px 8px 0 rgba(51, 51, 51, .2);
                overflow: hidden;

                .hdgl-list-bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 266px;
                    height: 100%;
                }

                .hdgl-item-bottom {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 266px;
                    height: 130px;
                    padding: 12px;
                    background-color: white;
                    font-size: 14px;
                    color: #101010;
                    z-index: 10;

                    .hdgl-item-id {
                        position: absolute;
                        top: -24px;
                        right: 0;
                        width: 68px;
                        height: 24px;
                        border-radius: 12px 0 0 0;
                        background-color: rgba(36, 147, 252, .45);
                        color: rgba(255, 255, 255, 100);
                    }
                }

                .game-name {
                    font-size: 14px;
                    color: #595959;
                }

                .game-content {
                    width: 100%;
                    height: 50px;
                }

                .game-state-time {
                    margin-top: 5px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 14px;
                    color: #BFBFBF;
                }
            }
        }

        .game-buttons {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;

            .game-button {
                width: 38px;
                height: 38px;
                border: 1px solid #F0F0F0;
                color: #8C8C8C;
            }

            .game-button + .game-button {
                margin-left: 8px;
            }
        }
    }

    .hdgl-list-popover {
        .right-button-content {
            display: flex;
            align-items: center;
            font-size: 14px;
            cursor: pointer;

            & + .right-button-content {
                margin-top: 10px;
            }

            .right-button-name {
                margin-left: 10px;
            }

            .game-popover-button {
                position: relative;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                /*border: 1px solid #F0F0F0;*/
                color: #8C8C8C;
            }

            .game-popover-button:hover {
                color: #409eff;
                /*border-color: #c6e2ff;*/
                background-color: #ecf5ff;
            }

            .game-popover-button-content {

                &.active:after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    display: block;
                    border-radius: 50%;
                    box-shadow: 0 0 0 0 #1890ff;
                    opacity: 0.2;
                    -webkit-animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
                    animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
                    -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
                    content: '';
                    pointer-events: none;
                }

            }
        }
    }
</style>
